import React, { Component, PropTypes } from 'react'
import { Modal, Icon, Stepper, Switch } from 'antd-mobile'
import { createForm } from 'rc-form'
import { NavHeader } from '../common'

class OperatePosition extends Component {
  constructor() {
    super()
    this.handleSubmit = this.handleSubmit.bind(this)
    this.renderAmount = this.renderAmount.bind(this)
    this.state = {
      amount: 1,
    }
  }
  render() {
    const { visible, onClose, form: { getFieldProps }, simplify } = this.props
    const { amount } = this.state
    return (
      <Modal
        className={`rt-make-position-modal`}
        visible={visible}
        animated={false}
        closable={false}
      >
        <NavHeader
          title={simplify ? '修改仓位' : '建仓确认'}
          onClick={onClose}
        />

        <div className={`cm-scrollable-container`}>
          <div className={`rt-info-box`}>
            <div className={`-left`}>
              <span>3KG工业银 (250元/手）</span>
              <span className={`rt-price`}>当前价格：<strong>3971</strong></span>
            </div>
            <div className={`-right`}>
              <span>涨</span>
              <div className={`-middle-box`}>
                <span className={`-adjust`}>保证金</span>
                <span>手续费</span>
              </div>
              <div>
                <span className={`-adjust`}>400.00元</span>
                <span>45.00元</span>
              </div>
            </div>
          </div>
          {
            simplify ? null
            : (
              <div className={`rt-bankroll-box`}>
                <div>
                  <span>可用资金</span>
                  <span className={`rt-balance`}>2000.00元</span>
                </div>
                <div>
                  <Icon type="question" />
                  <span className={`rt-recharge`}>充值</span>
                </div>
              </div>
            )
          }
          {
            simplify ? null
            : (
              <div className={`rt-lots-box`}>
                <span>手数</span>
                <div>
                  <div className={`-top`}>
                    {this.renderAmount([1, 2, 3, 4, 5])}
                  </div>
                  <div>
                    {this.renderAmount([6, 7, 8, 9, 10])}
                  </div>
                </div>
              </div>
            )
          }
          <div className={`rt-stepper-box`}>
            <span>止盈</span>
            <div>
              <Stepper
                showNumber
                max={50}
                min={0}
                step={10}
                readOnly={false}
                {...getFieldProps('targetProfit', {
                  initialValue: 0,
                })}
              />
              <span className={`-percent`}>％</span>
            </div>
          </div>
          <div className={`rt-stepper-box`}>
            <span>止损</span>
            <div>
              <Stepper
                showNumber
                max={500}
                min={0}
                step={1}
                readOnly={false}
                {...getFieldProps('stopLoss', {
                  initialValue: 0,
                })}
              />
              <span className={`-percent`}>％</span>
            </div>
          </div>
          <div className={`rt-switch-box`}>
            <span>持仓过夜</span>
            <div>
              <span className={`-r-ps`}>（递延费：0元/KG x 天）</span>
              <Switch
                {...getFieldProps('passNight', {
                  initialValue: false,
                  valuePropName: 'checked',
                })}
              />
            </div>
          </div>
          {
            simplify ? null
            : (
              <div className={`rt-switch-box`}>
                <span>使用体验券<span className={`-l-ps`}>（可用体验券  3  张）</span></span>
                <div>
                  <Switch
                    {...getFieldProps('useExp', {
                      initialValue: false,
                      valuePropName: 'checked',
                    })}
                  />
                </div>
              </div>
            )
          }
          {
            simplify ? null
            : (
              <div className={`rt-switch-box`}>
                <span>按实时价格成交</span>
                <div>
                  <Switch
                    {...getFieldProps('useServerPrice', {
                      initialValue: false,
                      valuePropName: 'checked',
                    })}
                  />
                </div>
              </div>
            )
          }
        </div>

        <div
          className={`rt-op-btn`}
          onClick={this.handleSubmit}
        >
          确 认
        </div>
      </Modal>
    )
  }
  handleSubmit() {
    const { form: { getFieldValue, getFieldsValue } } = this.props
    console.log(getFieldsValue(['useExp', 'targetProfit']))
    console.log(getFieldsValue())
  }
  renderAmount(dataArr) {
    const { amount } = this.state
    return dataArr.map(v => (
      <span
        key={v}
        className={`${v === amount ? '-active' : ''}`}
        onClick={() => {
          if (v === amount) return
          this.setState({
            amount: v,
          })
        }}
      >
        {v}
        {
          v === amount
          ? (
            <div className={`cm-right-angle-trangle-box`}>
              <div className={`cm-tick-box`}></div>
            </div>
          )
          : null
        }
      </span>
    ))
  }
}

OperatePosition.defaultProps = {
  simplify: false,
}

OperatePosition.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  simplify: PropTypes.bool,
}

export default createForm()(OperatePosition)